<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>用户注册</h1>
<hr>
<div>
    <form id="regForm" action="#" method="post">
        <table>
            <tr>
                <td class="title">用户名：</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td class="title">密码：</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td class="title">确认密码：</td>
                <td><input type="password" name="confirmpass"/></td>
            </tr>
            <tr>
                <td class="title">电子邮箱：</td>
                <td><input type="text" name="email" disabled="disabled"/></td>
            </tr>
            <tr>
                <td class="title">薪水：</td>
                <td><input type="text" name="salary" value="10000" hidden/></td>
            </tr>
            <tr>
                <td class="title">性别：</td>
                <td><input type="radio" value="M" name="gender" checked/>男<input type="radio" value="F" name="gender"/>女
                </td>
            </tr>
            <tr>
                <td class="title">学历：</td>
                <td>
                    <select name="education">
                        <option value="-1" selected>-----请选择-----</option>
                        <option value="0">文盲</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                        <option value="4">大专</option>
                        <option value="5">本科</option>
                        <option value="6">硕士</option>
                        <option value="7">博士</option>
                        <option value="8">博士后</option>
                        <option value="9">圣斗士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="title">籍贯：</td>
                <td>
                    <input list="province" name="province" value=""/>
                    <datalist id="province">
                        <option value="河北">
                        <option value="河南">
                        <option value="山东">
                        <option value="山西">
                        <option value="陕西">
                    </datalist>
                </td>
            </tr>
            <tr>
                <td class="title">出生日期：</td>
                <td><input type="date" name="birthday" value=""/></td>
            </tr>
            <tr>
                <td class="title">爱好：</td>
                <td>
                    <!--复选框name名字必须一样-->
                    <input type="checkbox" name="favorites" value="read"/>读书
                    <input type="checkbox" name="favorites" value="music"/>音乐
                    <input type="checkbox" name="favorites" value="internet"/>上网
                    <input type="checkbox" name="favorites" value="nba"/>NBA
                </td>
            </tr>
            <tr>
                <td class="title">自我介绍：</td>
                <td><textarea rows="10" cols="25" name="introduce"></textarea></td>
            </tr>
            <tr>
                <td class="title">上传照片：</td>
                <td><input type="file" name="pic"/></td>
            </tr>
            <tr>
                <td class="title">是否接受条款：</td>
                <td><input type="checkbox" name="accept"/>我无条件接受霸王条款</td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="button" onclick="doReg()">注册</button>
                    <input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</div>

<script>

    //jquery的表单转json的方法
    $.fn.parseForm = function () {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(function () {
            if (serializeObj[this.name]) {
                if ($.isArray(serializeObj[this.name])) {
                    serializeObj[this.name].push(this.value);
                } else {
                    serializeObj[this.name] = [serializeObj[this.name], this.value];
                }
            } else {
                serializeObj[this.name] = this.value;
            }
        });
        return serializeObj;
    };

    function doReg() {

        var param = $("#regForm").parseForm();
        console.log(JSON.stringify(param));
        //发送ajax请求
        $.ajax({
            url: 'http://localhost:8080/formdata/users/',
            data: JSON.stringify(param),
            type: 'post',
            contentType: 'application/json', //注意这里必须添加contentType: 'application/json'
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>

</body>
</html>
